<template>
  <div>
    <div class="border"></div>
    <section class="news">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">企业动态</el-menu-item>
        <el-menu-item index="2">集团要闻</el-menu-item>
        <el-menu-item index="3">保利新闻</el-menu-item>
        <el-menu-item index="4">国资动态</el-menu-item>
      </el-menu>
      <router-view />
    </section>
  </div>
</template>

<script>
export default {
  name: "NewsList",
  data() {
    return {
      rs: {
        1: "Business",
        2: "Bloc",
        3: "Poly",
        4: "SA",
      },
      rss: {
        Business: "1",
        Bloc: "2",
        Poly: "3",
        SA: "4",
      },
    };
  },
  computed: {
    activeIndex() {
      return this.rss[this.$router.currentRoute.name];
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      if (this.$router.currentRoute.name !== this.rs[key]) {
        this.$router.push({ path: "/" + this.rs[key] });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.border {
  position: relative;
  top: 61px;
  border-top: 1px solid #ebeef5;
}

.news {
  width: 1200px;
  margin: auto;

  .el-menu.el-menu--horizontal {
    border-bottom: 1px solid #ebeef5;

    .el-menu-item {
      font-size: 18px;
    }
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    color: #409eff;
  }
}
</style>
